<template>
    <div class="wh-full flex-col bg-[url(@/assets/images/login_bg.webp)] bg-cover">
      <!-- 主注册框 -->
      <div
        class="m-auto max-w-700 min-w-345 f-c-c rounded-8 bg-opacity-20 bg-cover p-12 card-shadow auto-bg"
      >
        <!-- 注册banner(隐藏式响应) -->
        <div class="hidden w-380 px-20 py-35 md:block">
          <img src="@/assets/images/login_banner.webp" class="w-full" alt="register_banner">
        </div>
  
        <!-- 注册表单 -->
        <div class="w-320 flex-col px-20 py-32">
          <h2 class="f-c-c text-24 text-#6a6a6a font-normal">
            <img src="@/assets/images/logo.jpeg" class="mr-12 h-50">
            {{ title }}
          </h2>
          <!-- 用户名输入框 -->
          <n-input
            v-model:value="registerInfo.username"
            autofocus
            class="mt-32 h-40 items-center"
            placeholder="请输入用户名"
            :maxlength="20"
          >
            <template #prefix>
              <i class="i-fe:user mr-12 opacity-20" />
            </template>
          </n-input>
          <!-- 密码输入框 -->
          <n-input
            v-model:value="registerInfo.password"
            class="mt-20 h-40 items-center"
            type="password"
            show-password-on="mousedown"
            placeholder="请输入密码"
            :maxlength="20"
          >
            <template #prefix>
              <i class="i-fe:lock mr-12 opacity-20" />
            </template>
          </n-input>
  
          <!-- 确认密码输入框 -->
          <n-input
            v-model:value="registerInfo.confirmPassword"
            class="mt-20 h-40 items-center"
            type="password"
            show-password-on="mousedown"
            placeholder="确认密码"
            :maxlength="20"
          >
            <template #prefix>
              <i class="i-fe:lock mr-12 opacity-20" />
            </template>
          </n-input>
  
          <!-- 邮箱输入框 -->
          <n-input
            v-model:value="registerInfo.email"
            class="mt-20 h-40 items-center"
            type="email"
            placeholder="请输入邮箱"
            :maxlength="50"
          >
            <template #prefix>
              <i class="i-fe:mail mr-12 opacity-20" />
            </template>
          </n-input>
  
          <!-- 注册按钮 -->
          <n-button
            class="mt-32 h-40 flex-2 rounded-5 text-16"
            type="primary"
            :loading="loading"
            @click="handleRegister()"
          >
            注册
          </n-button>
        </div>
      </div>
  
      <TheFooter class="py-12" />
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { lStorage } from '@/utils'
import { useAuthStore} from '@/store'
import api from '@/api'
  
  const router = useRouter()
  
  const title = '用户注册' // 自定义标题
  
  const registerInfo = ref({
    username: '',
    password: '',
    confirmPassword: '',
    email: ''
  })
  
  const loading = ref(false)
  
  async function handleRegister() {
    const { username, password, confirmPassword, email } = registerInfo.value
  
    // 输入校验
    if (!username || !password || !email || !confirmPassword)
      return $message.warning('请输入完整信息')
  
    if (password !== confirmPassword) {
      return $message.warning('密码和确认密码不一致')
    }
  
    try {
      loading.value = true
      $message.loading('正在注册，请稍后...', { key: 'register' })
      
      // 调用后端接口进行注册
      const { data } = await api.register({ username, password, email })
      
      // 注册成功，跳转到登录页
      $message.success('注册成功', { key: 'register' })
      const authStore = useAuthStore()
      $message.loading(authStore.$state.accessToken)

      authStore.resetToken()
      await nextTick()
  
      router.push('/login')
    } catch (error) {
      console.error(error)
      $message.error('注册失败，请重试')
    } finally {
      loading.value = false
    }
  }
  </script>
  